<template>
      <view class="uni-comment">
        <view class="uni-comment-list" v-for='comment,index in commentList'>
          <view class="uni-comment-face" v-if="comment.avatarUrl">
            <cover-image :src="comment.avatarUrl"></cover-image>
          </view>
          <view class="uni-comment-body">
            <view class="uni-comment-top">
              <text>{{comment.time}}</text>
              <text class='uni-comment-date'>{{comment.time}}</text>
            </view>
            <view class="uni-comment-content">{{comment.content}}</view>
            <view class="uni-comment-bottom" v-if="comment.question">
              <text class='question'>回答（{{comment.question.length}}）</text>
              <text>追问</text>
            </view>
          </view>
        </view>
      </view>
</template>

<script>
  export default {
    props: {
      commentList: Array,
    },
    data() {
      return {}
    },
  }
</script>

<style scoped lang=scss>
 /* comment */
    .uni-comment {
      padding: 30upx;
      display: flex;
      flex-grow: 1;
      flex-direction: column;
    }

    .uni-comment-list {
      flex-wrap: nowrap;
      padding: 10upx 0;
      margin: 10upx 0;
      width: 100%;
      display: flex;
            border-bottom: 1upx solid #c8c7cc;

    }

    .uni-comment-face {
      width: 70upx;
      height: 70upx;
      border-radius: 100%;
      margin-right: 20upx;
      flex-shrink: 0;
      overflow: hidden;
    }

    .uni-comment-face image {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }

    .uni-comment-body {
      width: 100%;
    }

    .uni-comment-top {
      width: 100%;
      line-height: 1.5em;
      display: flex;
      justify-content: space-between;
      color: #0A98D5;


    }

    .uni-comment-bottom {
      display: flex;
      justify-content: flex-end;
      color: #0A98D5;
      font-size: 20upx;
      .question {
        margin-right: 80upx;
      }
    }

    .uni-comment-date {
      color: #666666;
      font-size: 24upx;
      line-height: 38upx;
    }

    .uni-comment-content {
      line-height: 1.6em;
      font-size: 28upx;
      padding: 8upx 0;
    }

    .uni-comment-replay-btn {
      background: #FFF;
      font-size: 24upx;
      line-height: 28upx;
      padding: 5upx 20upx;
      border-radius: 30upx;
      color: #333 !important;
      margin: 0 10upx;
    }

</style>
